<template>
  <!-- 子组件容器 -->
  <div class="course-content">
    <!-- 顶部筛选功能区 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>数据筛选</span>
      </div>
      <!-- 数据筛选表单 -->
      <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="form.courseName" placeholder="课程名称"></el-input>
        </el-form-item>
        <!-- 选择器：选择课程当前状态 -->
        <el-form-item label="当前状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择当前状态">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 重置和查询功能按钮 - 设置点击事件 -->
          <el-button @click="reset()">重置</el-button>
          <el-button @click="queryCoures()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 底部展示区卡片 -->
    <el-card class="box-card">
      <!-- 顶部标题和添加课程按钮 -->
      <div slot="header" class="clearfix">
        <span>课程列表</span>
        <!-- 添加课程按钮添加事件跳转添加页面 -->
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.push('/addCourse')">添加课程</el-button>
      </div>
      <!-- 用于展示课程的列表 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"/>
        <el-table-column
          prop="courseName"
          label="课程名称"/>
        <el-table-column
          prop="price"
          label="价格"/>
        <el-table-column
          prop="sortNum"
          label="排序"/>
        <el-table-column
          label="是否上架">
          <template slot-scope="scope">
            <!-- 上架状态展示及操作开关，重设开关时候的值为0和1，监听状态修改,添加是否禁用属性disabled,使用row中的数据 -->
            <el-switch
              :disabled="scope.row.disabled"
              @change="switchChange(scope.row)"
              v-model="scope.row.status"
              active-color="#409eff"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!-- 操作按钮 -->
            <el-button @click="editCoures(scope.row.id)">编辑</el-button>
            <el-button @click="managementCoures(scope.row.id)">内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="form.currentPage"
        :page-sizes="[10, 15, 20]"
        :page-size.sync="form.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 引入封装的接口：分页查询课程信息、课程上下架
import { getQueryCourses, changeState } from '@/services/coures'
export default {
  name: 'course-content',
  data () {
    return {
      // 顶部筛选数据
      form: {
        currentPage: 1,
        pageSize: 10,
        courseName: '',
        status: ''
      },
      // 课程当前状态选择器选项
      selectOptions: [
        { value: '', label: '全部' },
        { value: '1', label: '上架' },
        { value: '0', label: '下架' }
      ],
      // 课程展示列表数据
      tableData: [],
      // 课程总数，绑定分页组件
      total: 0
    }
  },
  // 钩子函数
  created () {
    // 初始化获取课程
    this.getCourses()
  },
  methods: {
    // 状态修改事件函数
    async switchChange (row) {
      // 调用接口前将开关组件禁用
      row.disabled = true
      // 调用上下架接口
      const { data } = await changeState({
        // 设置传入参数
        courseId: row.id,
        status: row.status
      })
      if (data.code === '000000') {
        // 如果修改成功弹出提示、更新数据
        this.$message.success('状态修改成功')
        this.getCourses()
      }
      // 最后启用开关
      row.disabled = false
    },
    // 页码变化，直接获取课程
    handleCurrentChange () {
      this.getCourses()
    },
    // 每页条数变化，先重置页码，之后获取课程
    handleSizeChange () {
      this.form.currentPage = 1
      console.log('更改了每页条数')
      this.getCourses()
    },
    // 重置
    reset () {
      // 使用表单组件的重置功能
      this.$refs.form.resetFields()
    },
    // 查询课程，先重置页码，再查询课程
    queryCoures () {
      this.form.currentPage = 1
      this.getCourses()
    },
    // 编辑课程
    editCoures (courseId) {
      this.$router.push({
        name: 'editCourse',
        params: {
          courseId
        }
      })
    },
    // 内容管理
    managementCoures (courseId) {
      this.$router.push({
        name: 'contentManagement',
        params: {
          courseId
        }
      })
    },
    // 获取课程函数
    async getCourses () {
      // 获取数据
      const { data } = await getQueryCourses(this.form)
      data.data.records.forEach(item => {
        item.disabled = false
      })
      if (data.code === '000000') {
        // 获取成功，把数据交给列表和分页组件
        this.tableData = data.data.records
        this.total = data.data.total
      }
    }
  }
}
</script>
